<script setup>
import { ref, reactive, onMounted } from 'vue';
import { showToast } from "vant";
import { spaceApi } from '@/service/api.ts';
import { useConstValue } from '@/store/users.ts';

const constValue = useConstValue();

const show = ref(true);

const emits = defineEmits(['set-roomid']);

onMounted(() => {
  getSpaceBuilding();
});

const spaceRt = reactive({
  builds: [],
  buildShow: false,
  buildSelect: null,
  rooms: [],
  roomShow: false,
  roomSelect: null,
})
const getSpaceBuilding = () => {
  spaceApi({
    method: 'get',
    params: {
      project: constValue.projectID,
      type: '楼栋',
    }
  }).then(res => {
    const arrs = res?.results || [];
    spaceRt.builds = arrs.map(i => {
      return { name: i.name, id: i.id };
    })
  })
}

const buildSelect = (item) => {
  spaceRt.buildSelect = item;
  spaceRt.buildShow = false;
  getSpaceRoom(item.id);
}
const handleRoomClick = () => {
  if (!spaceRt.buildSelect?.id) {
    showToast('请先选择楼栋号！');
    return;
  }
  spaceRt.roomShow = true;
}
const getSpaceRoom = (buildID) => {
  spaceApi({
    method: 'get',
    params: {
      project: constValue.projectID,
      type: '房间',
      parent: buildID,
    }
  }).then(res => {
    const arrs = res?.results || [];
    spaceRt.rooms = arrs.map(i => {
      return { name: i.name, id: i.id, r_id: i.r_id };
    })
  })
}
const roomSelect = (item) => {
  spaceRt.roomSelect = item;
  spaceRt.roomShow = false;
}

const handleSubmit = () => {
  if (!spaceRt.roomSelect?.id) {
    showToast('请选择楼室号！');
    return;
  }
  emits('set-roomid', spaceRt.roomSelect.r_id);
}
</script>

<template>
  <div>
    <van-dialog v-model:show="show" :showConfirmButton="false">
      <div class="check-box flex-column">
        <header>请选择您家的楼号和室号</header>
        <van-cell is-link title="请选择楼栋号" :value="spaceRt.buildSelect?.name || '未选择'" @click="spaceRt.buildShow = true" />
        <van-cell is-link title="请选择楼室号" :value="spaceRt.roomSelect?.name || '未选择'" @click="handleRoomClick()" />
        
        <div class="btns flex--center">
          <button @click="handleSubmit()">确认</button>
        </div>
      </div>
    </van-dialog>
    
    <van-action-sheet v-model:show="spaceRt.buildShow" :actions="spaceRt.builds" @select="buildSelect" />
    <van-action-sheet v-model:show="spaceRt.roomShow" :actions="spaceRt.rooms" @select="roomSelect" />
  </div>
</template>

<style lang="scss" scoped>
.check-box {
  header {
    padding: 0 12px;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    height: 34px;
    line-height: 34px;
    margin-bottom: 20px;
    text-align: center;
  }
  p {
    font-size: 14px;
    color: #666666;
    height: 20px;
    line-height: 20px;
  }
  .description {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #888888;
    border-radius: 50%;
    color: #ffffff;
    margin-left: 5px;
  }
}
.btns {
  position: absolute;
  width: calc(100% - 20px);
  bottom: 24px;
  gap: 8px;
  button {
    width: 100%;
    background-color: #009245;
    border: 1px solid #009245;
    border-radius: 30px;
    font-weight: 400;
    font-size: 14px;
    padding: 12px 0;
    color: #FFFFFF;
  }
  button:nth-child(1) {
    // border-color: #E5E5E5;
    // background-color: transparent;
    // color: #000;
  }
}
</style>

<style scoped>
:deep(.van-dialog) {
  border-radius: 4px;
  padding: 20px 10px;
  margin: auto 12px;
  width: auto;
  min-height: 280px;
}
</style>